<template>
  <div class="box">
    <div class="item"  @click="gohome">
      <img src="@/assets/menu/job.png" alt=""/>
      首页
    </div>
    <div class="item" v-for="(item,index) in crumbs" :key="index" @click="gopath(item.path)">
      <img src="@/assets/menu/job.png" alt="" />
      {{ item.name }}
      <img class="x" src="@/assets/menu/x.png" alt="" @click="delcrumbs(index)"/>
    </div>

  </div>
</template>
<script setup lang="ts">
import { ref ,onMounted,watchEffect} from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

import {useCounterStore} from "@/stores/counter"
const store = useCounterStore();


//获取面包屑列表
const crumbs =store.items



const delcrumbs = (index:Number)=>{
  store.removeCrumbs(index)
}
//跳转home
const gohome = ()=>{
  router.push("/")
}
const gopath = (item:any)=>{
  router.push(item)
}
</script>
<style scoped lang="scss">
.box {
  flex:1;
  display: flex;
  align-items: center;
  width: 100%;
  .item {
    background-color: blue;
    color: #fff;
    font-size: 1.3rem;
    border: .1rem solid perple;
    padding: 0 2rem;
    height: 4.8rem;
    line-height: 4.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 1.3rem;
      height: 1.3rem;
      padding-right: .4rem;
    }
    .x {
      width: 1rem;
      height: 1rem;
      position: relative;
      top: -1.2rem;
      right: -1.8rem;
    }
  }
}
</style>
